<template>
    <!-- 搜索 -->
    <div class="search-view">
        <!-- 搜索框 -->
         <div class="search-content">
            <van-icon class="back" @click="router.back()" name="arrow-left"></van-icon>
            <van-search  v-model="value" placeholder="请输入搜索关键词"  @search="onSearch"/>
         </div>
       
        <!-- 搜索为空 -->
        <van-empty image="search" description="暂无该商品" v-show="productnull" />
        <!-- 大家都在搜 -->
        <div class="everybody-search" v-show="productnulls">
            <p class="everybody">大家都在搜</p>
            <div class="text">
                <div @click="serar('儿童')">儿童</div>
                <div @click="serar('耳机')">耳机</div>
                <div @click="serar('面霜')">面霜</div>
                <div @click="serar('家具')">家具</div>
                <div @click="serar('洗手台')">洗手台</div>
                <div @click="serar('亚麻床单')">亚麻床单</div>
                <div @click="serar('杯子')">杯子</div>
            </div>
            <p class="like">
                猜你喜欢
            </p>
            <!-- 猜你喜欢 -->
            <div class="goods-list">
                <goods v-for="item in likeList" :goods="item" :key="item.goods_id"></goods>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods-list">
                <goods v-for="item in searchList" :goods="item" :key="item.goods_id"></goods>
        </div>
    </div>
</template>

<script setup>
    import { useRouter } from 'vue-router';
import API from '../api'
    // 猜你喜欢
    let likeList = ref([]);
    let value = ref('');
    
    let searchList = ref([]);

    
    // 是否有商品
    let productnull = ref(false)
    let productnulls = ref(true);
    
    let router = useRouter()
    // 搜索方法
    let serar = async(val)=>{
        // 亲求
        let even = await API.getData('/api_search',{keywords: val});
        // 搜索数据为空
        if(!even.length){
            productnulls.value = true;
            productnull.value = false;
            return;
        }
        productnulls.value = false;
        productnull.value = false;
        searchList.value = even;
        console.log(even);
        
    };

    // 搜索框搜索
    const onSearch = async(val) => {
        productnulls.value = false;
        if(!val){
           
            productnulls.value = true;
            productnull.value = false;
            return;
        }
        searchList.value = await API.getData('/api_search',{keywords: val})

        if(!searchList.value.length){
            productnull.value = true;

        }

        // console.log(searchList.value.length);
        

    };
    // 钩子函数
    onMounted(async()=>{
        // 猜你喜欢
        let res = await API.getData('/api_goods',{page: parseInt(Math.random()*10+1) , pagesize: 4})
        likeList.value = res;
    })
</script>

<style lang="less">
  // 猜你喜欢
    .goods-list{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0px 10px;
    }
    // 大家都在搜
    .search-view{
        height: 100%;
        background-color: #FAFAFA;
        .everybody{
            font-size: 15px;
        }
        .like{
            font-size: 20px;
            margin-top: 20px;
        }
        .everybody-search{
            margin-top: 20px;
            padding: 10px;
            .text{
                display: flex;
                padding: 10px;
                flex-wrap: wrap;

                div{
                    padding: 10px;
                    background-color: #FFFFFF;
                    color: #999;
                    margin-right: 10px;
                    margin-bottom: 10px;
                }
            }
        }
    }

    .search-content{
		background: #fff;
		width: 100%;
		display: flex;
		align-items: center;
		.back{
			padding: 6px;
			padding-right: 0px;
			font-size: 22px;
			// font-weight: bold;
		}
		& :last-child{
			flex:1
		}
	}
</style>